<template>
  <div>
    <div class="container-fluid">
      <div class="common_title">
        文章类别管理
      </div>
      <div class="container-fluid common_con">
        <table
          class="table table-striped table-bordered table-hover mp20 category_table"
        >
          <thead>
            <tr>
              <th>名称</th>
              <th>Slug</th>
              <th class="text-center" width="100">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in list" :key="item.id">
              <td>{{ item.name }}</td>
              <td>{{ item.slug }}</td>
              <td class="text-center">
                <a
                  href="javascript:void(0)"
                  data-toggle="modal"
                  class=" btn btn-info btn-xs"
                  @click="edit(item)"
                  >编辑</a
                >
                <a
                  href="javascript:void(0)"
                  @click="remove(item.id)"
                  class="btn btn-danger btn-xs"
                  >删除</a
                >
              </td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="3" class="text-center">
                <a
                  href="javascript:void(0)"
                  class="btn btn-success"
                  id="xinzengfenlei"
                  data-toggle="modal"
                  data-target="#myModal"
                  @click="showDialog = true"
                  >新增分类</a
                >
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>

    <el-dialog
      title="新增文章分类"
      :modal-append-to-body="false"
      :visible.sync="showDialog"
    >
      <el-form>
        <el-form-item label="分类名称" label-width="120px">
          <el-input v-model="name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类描述" label-width="120px">
          <el-input v-model="slug" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getArticleCategory,
  addArticleCategory,
  deleteArticleCategory,
  editArticleCategory
} from './article.js'
export default {
  name: 'articleCategory',
  data () {
    return {
      list: [],
      showDialog: false,
      name: '',
      slug: '',
      id:'',
      isEdit:false
    }
  },
  created () {
    this.reload()
    console.log(111);
  },
  methods: {
    async reload () {
      let res = await getArticleCategory()
      //   console.log(res);
      this.list = res.data.data
    },
    async add () {
        if (this.isEdit) {
            let res = await editArticleCategory({
              name: this.name,
              slug: this.slug,
              id:this.id
            })
            //    console.log(res);
            this.$message.success('编辑成功')
            this.showDialog = false
            this.name=''
            this.slug=''
            this.reload()
        }else {
            let res = await addArticleCategory({
              name: this.name,
              slug: this.slug
            })
            //    console.log(res);
            this.$message.success('新增成功')
            this.showDialog = false
            this.reload()
        }
    },
    async remove (id) {
      // console.log(id);
      let res = await deleteArticleCategory(id)
      // console.log(res);
      this.$message.success('删除成功')
      this.reload()
    },
    edit(item) {
        this.isEdit=true
        this.showDialog=true
        this.name=item.name
        this.slug=item.slug
        this.id=item.id
    }
  }
}
</script>

<style></style>
